<template>
	<view class="uni_box home">
		<navbar title='课程下载' :yin="true">
			<view class="hright" slot="right">
				<text class="bianji">编辑</text>
			</view>
		</navbar>
		<view class="content">
			<u-sticky :offset-top="BarHeight()" h5-nav-height="44">
				<view class="tabview">
					<u-tabs :list="tablist" :is-scroll="true" :current="tabcurrent" @change="tabchange" active-color="#FD854F" inactive-color="#6F7B84"></u-tabs>
				</view>
			</u-sticky>
			<view class="nav">
				<view class="lianview" v-for="(item,index) in 2" :key="index">
					<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="leftimg" mode=""></image>
					<view class="lright">
						<view class="rcont">
							<text class="rname">Basic of Risk Management.mp4</text>
							<text class="rtime">2020-08-07 16:30:42</text>
						</view>
						<view class="rquan">
							<view class="quanview"></view>
							<!-- <u-icon name="checkmark-circle-fill" color="#FF7D29" size="30"></u-icon> -->
						</view>
					</view>
				</view>
			</view>

			<view class="botview">
				<view class="xuanitem">全选</view>
				<view class="xuanitem del">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				tablist:[
					{
						name: '已下载 5'
					}, {
						name: '下载中 1 '
					}
				],
				tabcurrent:0,
				// value: false,
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			change(index) {
				this.current = index;
			},
			tabchange(e){
				this.tabcurrent = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		padding: 0rpx 0rpx 130rpx;
		.tabview{
			padding: 20rpx;
			background-color: #fff;
			z-index: 100;
			// margin-top:  calc(var(--window-top));
		}
		.nav{
			padding:0 30rpx;
		}
		.tiyd{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 10rpx 0;
			.tida{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				display: inline-block;
				margin-right: 30rpx;
			}
		}
		.lianview{
			margin-bottom: 30rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EAEAEA;
			flex-direction: row;
				align-items: center;
				flex-direction: row;
				display: flex;
			.leftimg{
				width: 161rpx;
				height: 108rpx;
				border-radius: 5rpx;
				margin-right: 30rpx;
			}
			.lright{
				display: flex;
				flex: 1;
				flex-direction: row;
				align-items: center;
				.rcont{
					width: 80%;
					display: flex;
					flex-direction: column;
			
					.rname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}
					.rtime{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						display: block;
						margin-top: 14rpx;
					}
				}
				.rquan{
					margin-left: auto;

				}
			}
		}
	}
	.quanview{
		width: 26rpx;
		border: 1rpx solid #FD894F;
		border-radius: 50%;
		height: 26rpx;
		// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
	}
	.bianji{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}

	.botview{
		background-color: #fff;
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: center;
		.xuanitem{
			margin: 0 30rpx;
			flex: 1;
			height: 66rpx;
			background: #FD874F;
			border-radius: 33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.del{
			background: #E8433A;
		}
	}
</style>
